<template>
  <div class="container">
    <validate-form @form-submit="onSubmitForm">
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Email address</label>
        <validate-input
          :rules="mailRules"
          v-model="mailVal"
          placeholder="请输入邮箱地址"
          type="text"
        ></validate-input>
      </div>
      <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">Password</label>
        <validate-input
          :rules="passwordRules"
          v-model="passwordVal"
          placeholder="请输入密码"
          type="password"
        ></validate-input>
      </div>
    </validate-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import ValidateInput, { RuleProps } from '@/components/ValidateInput.vue';
import ValidateForm from '@/components/ValidateForm.vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

export default defineComponent({
  components: { ValidateInput, ValidateForm },
  setup() {
    const store = useStore();
    const router = useRouter();
    const mailVal = ref(null);
    const passwordVal = ref(null);
    const mailRules: RuleProps = [
      {
        type: 'required',
        message: '电子邮箱地址不能为空',
      },
      {
        type: 'mail',
        message: '请输入正确的邮箱格式',
      },
    ];
    const passwordRules: RuleProps = [
      {
        type: 'required',
        message: '密码不能为空',
      },
    ];
    const onSubmitForm = (result: boolean) => {
      if (result) {
        store.commit('login');
        router.push('/');
      } else {
        return false;
      }
    };
    return {
      mailRules,
      passwordRules,
      mailVal,
      passwordVal,
      onSubmitForm,
    };
  },
});
</script>
